<template>
  <type-wrapper :name="name">
    <el-cascader
      :placeholder="config.placeholder || ''"
      :value="selectedValue"
      :options="config.options"
      :props="{ expandTrigger: 'hover' }"
      size="small"
      @change="onChange"
    />
  </type-wrapper>
</template>

<script>
import TypeWrapper from './type-wrapper.vue'
import { Cascader } from 'element-ui'
export default {
  components: {
    'type-wrapper': TypeWrapper,
    'el-cascader': Cascader,
  },
  computed: {
    selectedValue() {
      if ('selectedValue' in this.extra) return this.extra.selectedValue

      const item = this.config.options.find(item => item.selected) || this.config.options[0]
      return item.value
    }
  },
  props: {
    name: {
      type: String,
    },
    config: {
      type: Object,
    },
    extra: {
      type: Object,
    }
  },
  methods: {
    onChange([value]) {
      this.$emit('change', value, {
        ...this.config,
        options: this.config.options.map(item => ({
          ...item,
          selected: item.value === value
        }))
      })
    },
  },
  // mounted() {
  //   this.$emit('init', this.selectedValue, {
  //     ...this.config,
  //     options: this.config.options.map(item => ({
  //       ...item,
  //       selected: item.value === this.selectedValue
  //     }))
  //   })
  // }
}
</script>